/**
  * fluid - *** APP NAME *** - *** PAGE NAME ***
  * Copyright *** COPYRIGHT ***
  * 
  * Page definition is part of *** APP NAME ***.
  * 
  *     fluid Project: http://fluidjs.codeplex.com/
  *        fluid Blog: http://fluidjs.vikasburman.com
  * 
  *        Repository: *** APP REPOSITORY *** 
  *
  */
(function($f) { $f.extend.page("*** GUID ***", function(self) {
	
	"use strict";
	
	// NOTES: 
	//	1. This page - plugin template defines majority of structures that can be defined in
	//     a fluid page plugin. 
	//
	//  2. IMPORTANT: All these definitions are IN ADDITION TO what can be defined for a normal plugin
	//     as specified in "plugin-template.debug.js". All those required structures should be picked from 
	//	   that file.
	//
	//  3. ALL OF THESE ARE OPTIONAL. You should keep only relevant structures that
	//     you are planning to use, and should remove anything which is not used.
	//
	//  4. Refer to http://fluidjs.codeplex.com/documentation to know about all possibilities 
	//     and other details.
	
	// vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
	// vvvvvvvvvvvvvvvvvv PRIVATE VARS, FUNCTIONS AND CLASSES vvvvvvvvvvvvvvvvv
	// vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv	
	
	// all private variables, functions and classes 
	// can be defined here
	
	// vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
	// vvvvvvvvvvvvvvvvvvvvvvvvvvvv PAGE DEFINITION  vvvvvvvvvvvvvvvvvvvvvvvvvv
	// vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
	
	// plugin configuration
	this.config = {
		// page layout 
		// for all styles define similar to include definition
		// IMPORTANT: if all advance options are not to be used - this can be defined
		// as a simple string: e.g., layout: ""
		layout: {
			// fallback styles
			styles: [ ],
			
			// fallback markup
			markup: "",
			
			// desktop version
			desktop: {
				// desktop specific styles
				styles: [ ],
				
				// desktop specific markup
				markup: ""
			},
			
			// tablet version
			tablet: {
				// fallback styles
				styles: [ ],
				
				// fallback markup
				markup: "",

				// portrait mode
				portrait: {
					// portrait mode styles
					styles: [ ],
					
					// portrait mode markup
					markup: ""
				},
				
				// landscape mode
				landscape: {
					// landscape mode styles
					styles: [ ],
					
					// landscape mode markup
					markup: ""
				}
			},
			
			// mobile version
			mobile: {
				// fallback styles
				styles: [ ],

				// fallback markup
				markup: "",

				// portrait mode
				portrait: {
					// portrait mode styles
					styles: [ ],
					
					// portrait mode markup
					markup: ""
				},
				
				// landscape mode
				landscape: {
					// landscape mode styles
					styles: [ ],
					
					// landscape mode markup
					markup: ""
				}
			}
		},
		
		// if data objects are to be maintained for entire session
		// on reload it is mataintained irrespective of this setting
		// in case user is navigating out, this setting is considered
		// to maintain or clear dataState
		// however this is considered only if isKeepStateAlive is set to true
		isKeepDataStateAlive: false,
		
		// if state of the plugin is to be maintained for entire session
		// on reload it is mataintained irrespective of this setting
		// in case user is navigating out, this setting is considered
		// to maintain or clear state
		isKeepStateAlive: false,
		
		// page's main content container
		// by default this will be picked from $f.config.options but it can be overridden here
		mainContentContainerElementId: "",
		
		// element id in page layout that will hold views content
		// by default this will be picked from $f.config.options but it can be overridden here
		viewsContainerElementId: "",
		
		// progressive page content container
		// by default this will be picked from $f.config.options but it can be overridden here
		progressivePageContentContainerElementId: "",
		
		// breadcrumbs container
		// by default this will be picked from $f.config.options but it can be overridden here
		breadCrumbsContainerElementId: "",			

		// wizard steps container
		// by default this will be picked from $f.config.options but it can be overridden here
		wizardContainerElementId: "",			
		
		// if enable content zoom shortcuts
		// if this is enabled, page content can be zoomed in/out via Ctrl+UpArrow and 
		// Ctrl+DnArrow keys
		isEnableContentZoomShortcuts: false, 
		
		// if prograssive pagination engine will be used
		isEnableProgressivePagination: false,
		
		// if auto prograssive pagination handler is to be activated
		isEnableAutoProgressivePagination: false,
		
		// if content of progressively loaded pages is to be maintained
		// across page refresh
		// however this is considered only if isKeepStateAlive is set to true
		isKeepProgressivelyLoadedPagesAlive: false,
		
		// if wizard support is to be activated
		isEnableWizardSupport: false,

		// distance from bottom of the screen in pixels 
		// reaching where progressive pagination will activate
		progressivePaginationActivationDistance: 100,
		
		// if automatically created bread crumbs are to be shown
		// at designated place on page
		isShowAutoBreadCrumbs: false,
		
		// if page peel to show on top right corner
		isEnablePagePeel: false,
		
		// if orientation change is to be detected
		isDetectOrientationChange: false,
		
		// required theme of the page 
		// this name must exists in all available themes of the application (as defined in application)
		// if this is empty, application's default theme will be picked
		theme: ""
	};
	
	// view definitions of this page
	// each item here can be defined as:
	//	<viewKey>: {viewId: "id of the view", view: "view-plugin-file" }
	this.views = {
	};
	
	// data objects
	// these data objects will automatically be replaced with the instance of given data object definition name
	// these data objects are like state objects and their value is persisted across page refresh
	// value of each named item here should be the qualified definition name of the required data object.
	// data object definition must be defined by inclusion of relevant JS files in "include"
	// each item here can be defined as:
	// <instanceName>: {type: "data object registered type name", isTrackChanges: "true|false", args: {...to pass to type's constructor...}}
	//				   "args" is an optional part, a clone object of args will be used instead of same object
	this.data = {
		// data object instances 
		// are to be defined here
		
		// custom data objects can be defined inside "custom"
		// these data objects should be loaded, saved by layout object itself
		// when referring to these objects for data binding in widgets, these can be defined as "custom.<dataObjectName>"
		custom: {
		}		
	};
	
	// data object validations
	// each validation item can be defined as:
	// {type: "validationType", 
	//	reverse: true|false, 
	//	field: "[custom].dataObjectInstanceName.fieldName", 
	//	message: "errorMessage | {resourceKeyPath}", 
	//	params: "{ params for type of validation}" 
	//	AND: [ <same {type: ...} elements} ]
	//	OR: [ <same {type: ...} elements} ]
	//	}
	// "related" is an optional element - should be used only in cases when certain checkes are to
	// be run only when parent check is true. It can be nested to any depth
	this.validations = [ 
	];

	// widgets
	// these widgts (layout) are first loaded in specified container (DOM element id) 
	// and then are binded with given dataObject (data)
	// loading of widgets (layout) is an optional part and if html already exists in specified container, 
	// this can be omitted.
	// the structure of each named element here should be: 
	// { container: "ID of the DOM element", data: "data object name as inside 'data'", layout: "html file name" }
	this.widgets = { 
	};
	
	// load custom data objects of layout object
	// returns (void):		
	this.loadCustomDataObjects = function() {
	};
	
	// save custom data objects of layout object
	// returns (void):		
	this.saveCustomDataObjects = function() {
	};
	
	// clear custom data objects of layout object
	// returns (void):		
	this.clearCustomDataObjects = function() {
	};
	
	// on before data load handler
	// this is called before data objects are loaded
	// returns (void):		
	this.onBeforeDataLoad = function() {
	};
	
	// on after data load handler
	// this is called after data objects are loaded but data binding is not done yet
	// returns (void):		
	this.onAfterDataLoad = function() {
	};
	
	// wizard step definition
	// each step here is defined as:
	// {name: "step name", layout: "step layout html", data: "data object that is bounded to the step"}
	// "data" is an optional part here, if not defined, data binding will not be done for this
	this.wizardSteps = [
	];
	
	// called when wizard is about to move to next step
	// step movement can be stoped or step can be changed
	// params: 
	//	currentStep (number): current step number
	// returns (number): what to do and where to go
	//					 -1: stop movement - don't change step
	//					  0: move to next step
	//			number/name: move to this step instead of default next step
	this.onNextStep = function(currentStep) {
		// return
		return 0; // by default allow to move to next
	};
	
	// called when wizard is about to move to back step
	// step movement can be stoped or step can be changed
	// params: 
	//	currentStep (number): current step number
	// returns (number): what to do and where to go
	//					 -1: stop movement - don't change step
	//					  0: move to previous step
	//			number/name: move to this step instead of default previous step		
	this.onBackStep = function(currentStep) {
		// return
		return 0; // by default allow to move to previous
	};
	
	// called when page content is zoomed in or out
	// finer adjustments can be done here, if required
	// params: 
	//	level (number): current zoom level (between 0 (no-zoom) to 3 (max zoom)
	// returns (void): 
	this.onZoom = function(level) {
	};
	
	// page peel configuration
	this.pagePeel = {
		// peel opens this link (internal or external)
		link: "",
		
		// peel shows this image behind (w:50px, h:50px)
		image: "",
		
		// flip image to use for peel (w:307px, h:319px)
		flipImage: ""
	};
	
	// fetch next page
	// params:
	//	nextPageNumber (number): next page number ot fetch
	// returns (void):		
	this.onFetchNext = function(nextPageNumber) {
		// it must call self.progressivePagination.fetchComplete(...); to complete the fetch loop
		throw "Not implemented.";
	};
	
	// called when device (mobile/tablet) orientation is changed
	// at this time page and master page is not yet loaded
	// any configuration, data objects, weavings, widgets etc. can be changed
	// based on orientation
	// returns (void):
	this.onOrientationChange = function() { 
	};
	
	// on before page view is about to switch (or load the first time)
	// this is called before view has started switching but yet nothing is done
	// Notes: 1. switch can be stopped by returning false
	// params:
	//	viewNavigatingOut (object): view that was navigated out (may be null, if first view is loading)
	//	hrefNavigatingIn (object): href of the view that is navigating in
	// returns (bool): true if switch is allowed, false otherwise	
	this.onBeforeViewSwitch = function(viewNavigatingOut, hrefNavigatingIn) {
		// return (by default switch is allowed)
		return true;
	};

	// on after page view is switched (or loaded the first time)
	// this is called after view is switched and $f.view is updated
	// params:
	//	viewNavigatedOut (object): view that was navigated out (may be null, if first view is loading)
	//	viewNavigatedIn (object): view that was navigated in
	// returns (void): 
	this.onAfterViewSwitch = function(viewNavigatedOut, viewNavigatedIn) {
	};
	
	// on before page unload handler
	// this is called before page has started unloading but yet nothing is done
	// Notes: 1. unload cannot be stopped
	//        2. alerts might not work from this function in some browsers
	// returns (void):
	this.onBeforeUnload = function() {
	};
	
	// on before page load handler
	// this is called before page has started loading but yet nothing is done
	// Notes: 1. page load cannot be stopped
	// returns (void):
	this.onBeforeLoad = function() {
	};

	// on after page load handler
	// this is called after page has completed loading and is ready to use
	// returns (void):
	this.onAfterLoad = function() {
	};
}); }(fluid));
